<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<!--

-->
<body>
<div class="container mt-3">
  <h2>自定义范围</h2>
  <p>设置范围菜单的样式, 使用 .form-range类添加到type=range的input元素</p>
  <p>默认情况下,范围数值之间的间隔为1,可以使用step属性更改</p>
  <p>默认情况下,最小值为0,最大值为100.可以使用min和max属性更改</p>
  <form action="/action_page.php">
    <label for="customRange" class="form-label">自定义范围</label>
    <input type="range" class="form-range" id="customRange" name="points" step="10">
    <button type="submit" class="btn btn-primary mt-3">提交</button>
  </form>
  <br>
  <h2>输入组</h2>
  <p>.input-group类是一种容器,通过在输入字段的前面或后面添加图标文本或按钮来帮助增强输入</p>
  <p>如果需要指定帮助文本的样式使用.input-group-text类</p>
  <p>使用.input-group-sm类用于小型输入组,将.input-group-lg 用于大型输入组</p>
  <form action="/action_page.php">
    <div class="input-group mb-3">
      <span class="input-group-text">@</span>
      <input type="text" class="form-control" placeholder="用户名" name="username">
    </div>
    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="你的邮箱" name="email">
      <span class="input-group-text">@example.com</span>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
  <br>
  <h2>多个输入控件或插件</h2>
  <p>多个输入控件</p>
  <form action="/action_page.php">
    <div class="input-group mb-3">
      <span class="input-group-text">人名</span>
      <label>
        <input type="text" class="form-control" placeholder="姓">
        <input type="text" class="form-control" placeholder="名">
      </label>
    </div>
    <div>
      <span class="input-group-text">一</span>
      <span class="input-group-text">二</span>
      <span class="input-group-text">三</span>
      <label>
        <input type="text" class="form-control">
      </label>
    </div>
  </form>
  <br>
  <h2>带复选框和单选框的输入组</h2>
  <form action="/action_page.php">
    <div class="input-group mb-3">
      <div class="input-group-text">
        <label>
          <input type="checkbox">
        </label>
      </div>
      <label>
        <input type="text" class="form-control" placeholder="一些文本">
      </label>
    </div>
    <div class="input-group mb-3">
      <div class="input-group-text">
        <label>
          <input type="radio">
        </label>
      </div>
      <label>
        <input type="text" class="form-control" placeholder="一些文本">
      </label>
    </div>
  </form>
  <br>
  <h2>带下拉按钮的输入组</h2>
  <form action="/action_page.php">
    <div class="input-group mt-3 mb-3">
      <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
        下拉按钮
      </button>
      <ul class="dropdown-menu">
        <li><a href="#" class="dropdown-item">链接 1</a></li>
        <li><a href="#" class="dropdown-item">链接 2</a></li>
        <li><a href="#" class="dropdown-item">链接 3</a></li>
      </ul>
      <label>
        <input type="text" class="form-control" placeholder="用户名">
      </label>
    </div>
  </form>
  <br>
  <h2>使用浮动标签,在输入字段内插入标签,并且在点击输入字段时它们浮动或者动画化</h2>
  <form action="">
    <div class="form-floating mb-3 mt-3">
      <input type="text" class="form-control" id="email" placeholder="请输入电邮地址" name="email">
      <label for="email">电邮</label>
    </div>
    <div class="form-floating mt-3 mb-3">
      <input type="text" class="form-control" id="pwd" placeholder="请输入密码" name="pswd">
      <label for="pwd">密码</label>
    </div>
    <div class="form-floating">
      <textarea name="text" id="comment" placeholder="Comment goes here" class="form-control" cols="30" rows="10"></textarea>
      <label for="comment">评论</label>
    </div>
  </form>
  <br>
  <h2>选项菜单</h2>
  <form action="">
    <div class="form-floating">
      <select name="se1list" id="sel1" class="form-select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      <label for="sel1" class="form-label">选择列表(选择一项)</label>
    </div>
  </form>
  <br>
  <h2>表单验证,在提交表单之前使用.was-validated来指示缺少什么:</h2>
  <p>.valid-feedback 或 .invalid-feedback 消息，以明确告知用户缺失了什么</p>
  <form action="" class="was-validated">
    <div class="mb-3 mt-3">
      <label for="uname" class="form-label">用户名: </label>
      <input type="text" class="form-control" id="uname" placeholder="请输入用户名" name="uname" required>
      <div class="valid-feedback">有效的</div>
      <div class="invalid-feedback">请填写此字段</div>
    </div>
    <div class="mb-3">
      <label for="pwd1" class="form-label">密码: </label>
      <input type="password" class="form-control" id="pwd1" placeholder="请输入密码" name="pswd" required>
      <div class="valid-feedback">有效的</div>
      <div class="invalid-feedback">请填写此字段</div>
    </div>
    <div class="form-check mb-3">
      <input type="checkbox" class="form-check-input" id="myCheck" name="remember" required>
      <label for="myCheck" class="form-check-label">我同意这些条款.</label>
      <div class="valid-feedback">有效的.</div>
      <div class="invalid-feedback">选中此复选框以继续.</div>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</div>
</body>
</html>
